/**
 * Recent thumbs list
 */

$(document).ready(function() {
	recentThumbs.init();
});

var recentThumbs = { 

	interval : 15000,
	
	list : {},
	count : 16,
	loaded : 0,
	
	onShowOffset : 10,
	onHideOffset : -10,
	
	labelClass : "",
	
	linkHandler : function(t, item) {},
	onInitComplete : function() {},
	
	init : function() {
		debug.print("recentThumbs.init");
		$("#recentThumbs").hide();
		this.loadRecent(this.count, function() {
			recentThumbs.loaded++;
			if (recentThumbs.loaded >= recentThumbs.count) {
				$("#recentThumbs .thumb").show();				
				$("#recentThumbs").slideDown(500);				
				recentThumbs.onInitComplete();
			}			
		});
		setInterval(function() {
			recentThumbs.loadRecent(1, function() {
				$("#recentThumbs .thumb:gt(" + (recentThumbs.count - 1) + ")").fadeOut(200, function(){
					$("#recentThumbs .thumb:gt(" + (recentThumbs.count - 1) + ")").remove();
					$("#recentThumbs .thumb:first").slideDown(200);
				});				
			});	
		}, this.interval);
	},
	
	showLabel : function() {
		var video = $(this).data("video");
		var c = $(this)
			.find("div")
			.clone()
			.attr("id", "thumbLabel_" + video.id)
			.data("video", video)		
			.css("top", $(this).offset().top)
			.css("left", $(this).offset().left)
			.css("opacity", 0)
			.addClass("thumbLabel " + recentThumbs.labelClass);
		$("body")
			.prepend(c);
		c
			.show()
			.animate({
				top : (parseInt(c.css("top")) + recentThumbs.onShowOffset) + "px",
				opacity: 1
			});
	},
	
	hideLabel : function() {
		var video = $(this).data("video")
		$("#thumbLabel_" + video.id)
			.animate({
				top : (parseInt($("#thumbLabel_" + video.id).css("top")) + recentThumbs.onHideOffset) + "px",
				opacity: 0
			}, function() {
				$(this).remove();
			});
	},
	
	loadRecent : function(count, callback) {
		$.getJSON("/video/recent/json?count=" + count, function(data){
			if (ObjectLength(data.videos) > 0) {
				recentThumbs.add(data.videos, callback);
			};			
		});
	},
	
	template : function() {
		debug.print("recentThumbs.template");
		var ret = "\
<div class='thumb'>\
	<a href=''>\
		<img src='' width='57' height='56' alt='' />\
		<div><span></span></div>\
	</a>\
</div>";
		return ret;		
	},
	
	add : function(obj, callback) {
		debug.print("recentThumbs.add [obj: " + obj + "]");
		var rt = $("#recentThumbs");
		for (var i in obj) {
			if (!this.inList(obj[i].id, this.list)) {
				this.list[i] = obj[i];
				this.renderItem(this.list[i], rt, callback)
			} else {
				callback();
			}
		}
	},
	
	inList : function(id, object) {
		debug.print("recentThumbs.add [id: " + id + ", object: " + object + "]");
		for (var i in object) {
			if (object[i].id == id) {
				return true;
			}
		}
		return false;
	},
	
	renderItem : function(item, rt, callback) {
		debug.print("recentThumbs.renderItem [item: " + item + ", rt: " + rt + "]");
		rt.prepend(this.template());		
		
		var t = rt.find(".thumb:first").hide();
		t.hover(this.showLabel, this.hideLabel);		
		t.data("video", item);			
		t.find("a").attr("href", '/#' + item.id);
		//t.find("a").attr("title", item.artist + " - " + item.title);
		t.find("img").attr("src", item.thumbnail);
		t.find("img").attr("alt", item.artist + " - " + item.title);
		t.find("img").bind("load error", callback);
		t.find("span").html(item.artist + " - " + item.title);
		recentThumbs.linkHandler(t, item);
	}

};